import { Table, Button, Input, Space, Modal, Form, Popconfirm, message } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';

const Patients = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [editingPatient, setEditingPatient] = useState(null);
  const [form] = Form.useForm();

  // 模拟患者数据
  const mockPatients = [
    { id: 1, name: '张三', age: 65, gender: '男', avatar: '', tags: ['糖尿病', '高危'] },
    { id: 2, name: '李四', age: 58, gender: '女', avatar: '', tags: ['高血压'] },
    { id: 3, name: '王五', age: 72, gender: '男', avatar: '', tags: ['糖尿病', '心脏病'] },
    { id: 4, name: '赵六', age: 61, gender: '女', avatar: '', tags: ['高血脂'] },
    { id: 5, name: '钱七', age: 69, gender: '男', avatar: '', tags: ['糖尿病', '肾病'] },
  ];

  // 拉取患者数据
  useEffect(() => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      setData(mockPatients);
      setLoading(false);
    }, 500);
  }, [search]);

  const columns = [
    { 
      title: '姓名', 
      dataIndex: 'name',
      sorter: (a, b) => a.name.localeCompare(b.name)
    },
    { 
      title: '年龄', 
      dataIndex: 'age',
      sorter: (a, b) => a.age - b.age
    },
    { 
      title: '性别', 
      dataIndex: 'gender'
    },
    { 
      title: '标签', 
      dataIndex: 'tags', 
      render: tags => tags.map((t, index) => (
        <span key={index} className={`tag ${t === '糖尿病' ? 'danger-tag' : t === '高血压' ? 'warning-tag' : 'success-tag'}`}>
          {t}
        </span>
      ))
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <Button 
            type="link" 
            icon={<EditOutlined />} 
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Popconfirm
            title="确定删除此患者？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const handleAdd = (values) => {
    message.success('患者添加成功');
    setModalVisible(false);
    form.resetFields();
    // 重新加载数据
  };

  const handleEdit = (record) => {
    setEditingPatient(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (id) => {
    message.success('患者删除成功');
    // 重新加载数据
  };

  const handleModalOk = () => {
    form.submit();
  };

  const handleModalCancel = () => {
    setModalVisible(false);
    setEditingPatient(null);
    form.resetFields();
  };

  return (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <Space>
          <Input
            placeholder="搜索患者"
            prefix={<SearchOutlined />}
            onChange={e => setSearch(e.target.value)}
            style={{ width: 200 }}
          />
        </Space>
        <Button 
          type="primary" 
          icon={<PlusOutlined />} 
          onClick={() => setModalVisible(true)}
        >
          新增患者
        </Button>
      </div>

      <Table 
        columns={columns} 
        dataSource={data} 
        loading={loading} 
        rowKey="id" 
        pagination={{ pageSize: 10 }}
        scroll={{ x: 800 }}
      />

      {/* 新增/编辑患者弹窗 */}
      <Modal
        title={editingPatient ? "编辑患者" : "新增患者"}
        open={modalVisible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
      >
        <Form form={form} layout="vertical" onFinish={handleAdd}>
          <Form.Item 
            name="name" 
            label="姓名" 
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            name="age" 
            label="年龄" 
            rules={[{ required: true, message: '请输入年龄', type: 'number', min: 0, max: 150 }]}
          >
            <Input type="number" />
          </Form.Item>
          <Form.Item 
            name="gender" 
            label="性别" 
            rules={[{ required: true, message: '请选择性别' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="tags" label="标签">
            <Input placeholder="如：糖尿病, 高危" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Patients;
